<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			.slider{
				width: 300px;
				height: 300px;
				border: 1px solid;
				margin: 0 auto;
				text-align: center;
				position: relative;
			}
			.slider ul{
				
				width: 100%;
				height: 300px;
			}
			.slider ul li{
				display: none;
				list-style: none;
			}
			.slider ul li img{
				width: 100%;
				height: 100%;
			}
			.slider .btn{
				position: absolute;
				bottom: 10px;
				left: 120px;
			}
			.slider .btn span{
				float: left;
				margin: 3px;
				font-size: 12px;
				color: #666666;
				cursor: pointer;
				
			}
			.slider .lrBtn{
				width:100%;
				height: 100%;
				position: absolute;
				top: 50%;
				margin-top: -15px;
			}
			.slider .lrBtn .lBtn{
				float: left;
				cursor: pointer;
				display: none;
				
			}
			.slider .lrBtn .rBtn{
				float: right;
				cursor: pointer;
			display: none;
			}
			.slider  :hover .lBtn{
				display: block;
			}
			.slider  :hover .rBtn{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="slider">
			<ul>
				<li style="display: block;"><a href="#"><img src="../../../1/img/aaj.jpg"></a></li>
				<li><a href="#"><img src="../../../1/img/bjk.jpg"></a></li>
				<li><a href="#"><img src="../../../1/img/dog.jpg"></a></li>
				<li><a href="#"><img src="../../../1/img/lzx1.jpg"></a></li>
				<li><a href="#"><img src="../../../1/img/lzx2.jpg"></a></li>
			</ul>
			<div class="btn">
				<span><a href="#">1</a></span>
				<span><a href="#">2</a></span>
				<span><a href="#">3</a></span>
				<span><a href="#">4</a></span>
				<span><a href="#">5</a></span>
			</div>
			<div class="lrBtn">
				<div class="lBtn"><a href="#">< </a></div>
				<div class="rBtn"><a href="#">> </a></div>
			</div>
		</div>
	</body>
</html>
